import React, { useEffect, useState } from "react";
import { Tabs } from "antd-mobile";
import { Image, List ,InfiniteScroll} from "antd-mobile";
import axios from "axios";
function Index() {
  const [list, setlist] = useState([]);
  const [page,setpage]=useState(1)
   const [hasMore, setHasMore] = useState(true)
  const getdata = async () => {
    const res = await axios.get("/api/list",{
      params:{
        page
      }
    });
    console.log(res);
    if (res.data.code == 200) {
      setlist([...list,...res.data.data]);
      setpage(page+1)
    }
    if(res.data.data.length==0){
      setHasMore(false)
    }
  };
  useEffect(() => {
    getdata();
  }, []);
  return (
    <div>
      <Tabs>
        <Tabs.Tab title="全部" key="fruits">
          <div>
            <List header="用户列表">
              {list.length>0&&list.map((item,index) => (
                <List.Item
                  key={index}
                  prefix={
                    <Image
                      src='https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ'
                      style={{ borderRadius: 20 }}
                      fit="cover"
                      width={40}
                      height={40}
                    />
                  }
                  description={item.date}
                >
                  {item.title}
                </List.Item>
              ))}
            </List>
          </div>
        </Tabs.Tab>
        <Tabs.Tab title="蔬菜" key="vegetables">
          西红柿
        </Tabs.Tab>
        <Tabs.Tab title="动物" key="animals">
          蚂蚁
        </Tabs.Tab>
      </Tabs>
      <InfiniteScroll loadMore={getdata} hasMore={hasMore} />
    </div>
  );
}

export default Index;
